@import "../../less/@name";

.sideNavBar{
  width:44px;
  height:44px;
  right: 10px;
  position: fixed;
  bottom: 80px;
  ul{
    flex-direction: column-reverse;
    a{
      position: absolute;
      li{
        align-items: center;
        justify-content: center;
        width:44px;
        height:44px;
        border-radius: 50%;
        background: rgba(0,0,0,.5);
        i{
          color: @bg-white;
          font-size: 2.2em;
        }
      }
    }
    .sideNavBar0{
      bottom: 0;
      display: block;
      &.active{
        transform: rotate(45deg);
        transition: all .6s cubic-bezier(0.42, 0, 0, 1);
      }
    }
    .sideNavBar1{
      bottom: 0;
      display: block;
      opacity: 0;
      &.active{
        transition: all .1s cubic-bezier(0.42, 0, 0, 1);
        display: block;
        bottom: 54px;
        opacity: 1;
      }
    }
    .sideNavBar2{
      bottom: 0;
      display: block;
      opacity: 0;
      &.active{
        transition: all .2s cubic-bezier(0.42, 0, 0, 1);
        display: block;
        bottom: 108px;
        opacity:1;
      }
    }
    .sideNavBar3{
      bottom: 0;
      display: block;
      opacity: 0;
      &.active{
        transition: all .3s cubic-bezier(0.42, 0, 0, 1);
        display: block;
        bottom: 162px;
        opacity:1;
      }
    }
    .sideNavBar4{
      bottom: 0;
      display: block;
      opacity: 0;
      &.active{
        transition: all .4s cubic-bezier(0.42, 0, 0, 1);
        display: block;
        bottom: 216px;
        opacity:1;
      }
    }
    .sideNavBar5{
      bottom: 0;
      display: block;
      opacity: 0;
      &.active{
        transition: all .5s cubic-bezier(0.42, 0, 0, 1);
        display: block;
        bottom: 270px;
        opacity:1;
      }
    }
  }
}